<!--
 * @Date: 2023-02-09 16:54:59
 * @LastEditTime: 2023-02-22 11:05:59
 * @FilePath: /hash-guess-game/src/views/dailyComputingPower/dailyComputingPower.vue
 * 介绍:俱乐部成员
-->
<script lang="ts" setup>
import {
  apiGiftOfEquity,
  GiftOfEquity,
  apiWelfareGift,
  WelfareGift,
} from "@@/api/module/dailyComputingPower";
import { TagEmun } from "@@/components/Tag";
import { formatNumber } from "@@/utils/tools/tools";
import dayjs from "dayjs";
import { t } from "@@/hooks/useI18n";
const { t: $t } = useI18n();

const statusEmun1: TagEmun = reactive([
  {
    text: $t("gou-mai"),
    value: 1,
  },
  {
    text: $t("fan-huan"),
    value: 2,
  },
]);
const statusEmun2: TagEmun = reactive([
  {
    text: $t("liu-shui"),
    value: 1,
  },
  {
    text: $t("jia-su"),
    value: 2,
  },
]);
const tabs = [
  {
    title: t("quan-yi-zen-song"),
    key: 0,
    api: apiGiftOfEquity,
    statusEmun: statusEmun1,
  },
  {
    title: t("fu-li-zen-song"),
    key: 1,
    api: apiWelfareGift,
    statusEmun: statusEmun2,
  },
];
const currentTab = ref<StrNumber>();
</script>

<template>
  <div class="dailyComputingPower auto-mt">
    <h4>{{ $t("dang-ri-suan-li") }}</h4>
    <Tabs v-model:active="currentTab">
      <template #nav-bottom>
        <Card gap="solid">
          <div class="list_title list-layout">
            <div>{{ $t("shi-jian") }}</div>
            <div>{{ $t("zhuang-tai") }}</div>
            <div>{{ $t("shu-liang") }}</div>
          </div>
        </Card>
      </template>
      <VanTab
        v-for="tab in tabs"
        :title="$t(tab.title)"
        :name="tab.key"
        :key="tab.key"
      >
        <Card>
          <PagingList :api="tab.api">
            <template
              #item="{
                item,
              }: { item: GiftOfEquity.ResItem | WelfareGift.ResItem } & {
                item: unknownObj,
              }"
            >
              <div class="List_item list-layout">
                <div class="T-S-sm">
                  {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm") }}
                </div>
                <Tag :enum="tab.statusEmun" :value="item.type" />
                <div class="T-S-sm">
                  <div class="List_item_number">
                    {{ formatNumber(item.number || item.money) }}
                  </div>
                </div>
              </div>
            </template>
          </PagingList>
        </Card>
      </VanTab>
    </Tabs>
  </div>
</template>

<style lang="less" scoped>
h4 {
  text-align: center;
  margin-bottom: var(--gap-md);
}

.PagingList {
  .List_item {
    padding: var(--gap-md) 0;
    border-bottom: 2rem solid var(--C-T1);
  }
}
.Tabs {
  .Card {
    margin-top: var(--gap-sm);
  }
}
.List_item_number {
  background-color: var(--C-M1);
  border-radius: 0.3em;
  padding: 0.1em 0.6em;
}
</style>
